<template>
  <div class="loading">
    <div class="gif"></div>
    <div class="title">{{title}}</div>

  </div>
</template>
<script>
export default {
  name: 'Loading',
  props: {
    title: {
      type: String,
      default: '正在加载中...'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
.loading
  display flex
  justify-content center
  align-items center
  flex-direction column
  width 100%
  height 200px

  .gif
    height 100%
    width 100%
    background url('~@/assets/images/loading.gif')
    background-position center center
    background-repeat no-repeat
    background-size 200px 200px

  .title
    font-size $fzThird
    color $fzColor
</style>
